<template>
  <div class="list_box_pd">
    <div class="clerk_top">
      <el-form :inline="true" :model="formSearch" :rules="rules">
        <el-form-item prop="name">
          <el-input v-model="formSearch.name" placeholder="请输入姓名查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="multiDelete">删除</el-button>
        </el-form-item>
      </el-form>
      <div class="clerk_top_r">
        <div class="filter-item">
          <el-date-picker
            v-model="formTime.time"
            type="datetimerange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            unlink-panels="true"
          ></el-date-picker>
        </div>
        <div class="filter-item filter-item-last">
          <el-button type="primary" icon="el-icon-circle-plus" @click="VisibleAdd=true">添加</el-button>
        </div>
      </div>
    </div>
    <div>
      <el-table :data="tableData" border class="table" ref="table" @selection-change="selectChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="序号" sortable align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="iconUrl" label="头像">
          <template slot-scope="scope">
            <img class="table_icon" :src="scope.row.iconUrl" alt>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="300"></el-table-column>
        <el-table-column label="操作" width="120">
          <template>
            <el-button size="mini" type="primary" plain @click="VisibleDelete=true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增店员弹窗 -->
    <el-dialog title="新增店员" :visible.sync="VisibleAdd" width="700px">
      <el-form :model="formAdd" :rules="rules" label-width="100px">
        <el-form-item label="店员手机号" prop="phone">
          <el-input v-model="formAdd.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer add_footer">
        <el-button @click="VisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog title="删除" :visible.sync="VisibleDelete" width="500px">
      <div class="dialog_content">请确认是否删除此条 ？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VisibleDelete = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      VisibleAdd: false,
      VisibleDelete: false,
      formSearch: {
        name: ""
      },
      formTime: {
        time: ""
      },
      formAdd: {
        phone: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名查询", trigger: "blur" },
          { min: 1, max: 7, message: "长度在 1 到 7 个字符" },
          { pattern: /^[\u4E00-\u9FA5]+$/, message: "用户名只能为中文" }
        ],
        phone: [
          {
            required: true,
            min: 1,
            max: 11,
            message: "请输入最多11位手机号",
            trigger: "blur"
          },
          { pattern: /^[0-9]*$/, message: "手机号只能是数字" }
        ]
      },
      tableData: [
        {
          name: "橙子",
          iconUrl: require("@/assets/images/user.jpg"),
          role: "管理员",
          createTime: "2019-04-27 11:42:10"
        }
      ]
    };
  },
  methods: {
    multiDelete() {    //批量删除
      this.VisibleDelete = true;
    },
    selectChange() {    //表格多选框变化
      
    },
    saveEdit() {

    }
  }
}
</script>

<style scoped lang="scss">
.clerk_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .clerk_top_r {
    display: flex;
    flex-direction: row;
    .filter-item-last {
      margin-left: 40px;
    }
  }
}
.table {
  .table_icon {
    width: 56px;
    height: 56px;
    border-radius: 100%;
  }
}
.el-dialog {
  .dialog_content {
    padding-top: 20px;
    text-align: center;
    font-size: 20px;
  }
  .el-form {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    .el-input {
      width: 450px;
    }
  }
  .add_footer {
    padding-right: 40px;
  }
  .el-button {
    margin: 0 16px;
  }
}
</style>